<template>
  <div class="ant-col ant-col-24" style="padding: 0 30px">
    <div class="ant-row ant-row-space-between ant-row-middle"
         style="border-bottom: 1px solid rgb(240, 240, 240); height: 60px; padding-bottom: 10px; row-gap: 0px;"
    >
      <div class="ant-col ant-col-20">
        <div class="article-status">
          <div :class="[tabIndex == 0 ? 'is-active' : '']" @click="handleChangeTab(0)">我的资源 <span
              v-if="tabIndex==0 && total>0">({{ total }})</span></div>
          <div :class="[tabIndex == 1 ? 'is-active' : '']" @click="handleChangeTab(1)">收藏资源<span
              v-if="tabIndex==1  && total>0">({{ total }})</span></div>
          <div :class="[tabIndex == 2 ? 'is-active' : '']" @click="handleChangeTab(2)">点赞资源<span
              v-if="tabIndex==2  && total>0">({{ total }})</span></div>
          <div :class="[tabIndex == 3 ? 'is-active' : '']" @click="handleChangeTab(3)">浏览资源<span
              v-if="tabIndex==3  && total>0">({{ total }})</span></div>
        </div>
      </div>
      <div class="ant-col ant-col-4" style="text-align:right;">
        <nuxt-link to="/note" title="点击前往首页">
          <n-button style="font-weight: bold">
            <n-icon>
              <HomeOutline></HomeOutline>
            </n-icon>
            <span class="px-1">资源首页</span>
          </n-button>
        </nuxt-link>
      </div>
    </div>
    <div class="ant-row" style="row-gap: 0px;" type="flex">
      <div class="ant-col ant-col-24 articles" style="">
        <div class="ant-row-start ant-row-middle" style="margin-bottom: 20px; row-gap: 0px;" type="flex">
          <ksd-downloads-user-study v-if="tabIndex==0" @success="handleSuccess"></ksd-downloads-user-study>
          <ksd-downloads-user-fav v-if="tabIndex==1" @success="handleSuccess"></ksd-downloads-user-fav>
          <ksd-downloads-user-like v-if="tabIndex==2" @success="handleSuccess"></ksd-downloads-user-like>
          <ksd-downloads-user-hit v-if="tabIndex==3" @success="handleSuccess"></ksd-downloads-user-hit>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
const tabIndex = ref(0)
const total = ref(0)

const handleChangeTab = (index) => {
  if (tabIndex.value == index) return
  tabIndex.value = index
}

// 被子组件调用的方法
const handleSuccess = (dbtotal) => {
  total.value = dbtotal
}

</script>